//更换头像  官网的操作方式
// var $image = $('#image')

// $image.cropper({
//   aspectRatio: 16 / 9,
//   crop: function (event) {
//     console.log(event.detail.x)
//     console.log(event.detail.y)
//     console.log(event.detail.width)
//     console.log(event.detail.height)
//     console.log(event.detail.rotate)
//     console.log(event.detail.scaleX)
//     console.log(event.detail.scaleY)
//   },
// })

// 1. 初始化裁剪插件
let cropper = new Cropper($('#image')[0], {
  aspectRatio: 1, // 裁剪图层的横纵比例
  preview: $('.img-preview'), // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
})
//给选择图片注册点击事件 html结构中有一个input:file的表单 障眼法 点击的是 选择图片按钮 实际触发的是input:file的change事件
$('.select').on('click', (e) => {
  $('#file').click()
})
//给input:file 注册监听change事件 不能使用剪头函数 因为箭头函数 this指向父级 父级没有继续向上找
$('#file').on('change', function (e) {
  // console.log(e.target.files)
  const url = URL.createObjectURL(this.files[0])
  // console.log(url)
  // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
  cropper.replace(url) // 让cropper重新设置图片url地址以及重新构建cropper
  // getPic()
})

//给确定按钮绑定点击事件 确定更换头像
$('.sure').on('click', async function () {
  let canvas = cropper.getCroppedCanvas({
    // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
    width: 100,
    height: 100,
  })
  var base64Str = canvas.toDataURL('image/jpeg') // canvas图像 -> base64字符串
  base64Str = encodeURIComponent(base64Str) // 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
  //发送请求 携带参数上传头像
  await reqPostUpdatePic({ avatar: base64Str })
  window.parent.getUserInfoFn()
})

// 获取个人信息,将个人信息的头像渲染到image的src
async function getPic() {
  const res = await reqGetUserInfo()
  // console.log(res)
  const userPic = res.data.data.user_pic
  // console.log(userPic)
  if (userPic) {
    $('#image').attr('src', userPic)
    cropper.replace(userPic)
  }
}
getPic()
